import React, { Component } from "react";
import Footer from "./footer";
import Header from "./header";
class index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nav_active: 1,
    };
  }
  addNav(e) {
    const index = e.currentTarget.getAttribute("data-index");
    console.log(index, e);
    this.setState({
      nav_active: Number(index),
    });
  }
  render() {
    const { nav_active } = this.state;
    return (
      <>
        <Header tit="糖果派" />
        <div className="logo">
          <img src={require("../../images/logo.png").default} alt="" />
        </div>
        <ul className="nav">
          <li
            data-index="1"
            onClick={(e) => this.addNav(e)}
            className={nav_active === 1 ? "nav_active" : ""}
          >
            <span>正在空投</span>
            <i></i>
          </li>
          <li
            data-index="2"
            onClick={(e) => this.addNav(e)}
            className={nav_active === 2 ? "nav_active" : ""}
          >
            <span>即将空投</span>
            <i></i>
          </li>
          <li
            data-index="3"
            onClick={(e) => this.addNav(e)}
            className={nav_active === 3 ? "nav_active" : ""}
          >
            <span>空投结束</span>
            <i></i>
          </li>
        </ul>
        <ul
          className={nav_active === 1 ? "nav_active list lis_a" : "list lis_a"}
        >
          <li className="lis_hot">
            <i className="hot"></i>
            <div className="lis_left"></div>
            <div className="lis_right">
              <p className="tit">
                <b>OEC</b>
                <span>
                  200,000
                  <i>OEC</i>
                </span>
              </p>
              <p className="txt">
                OE是以区块链底层技术为架构，存储为底层，OEC则是以
              </p>
              <div className="passage">
                <i></i>
              </div>
              <p className="time">
                <span>还剩18天19时41分</span>
                <span>剩余可抢91.79%</span>
              </p>
            </div>
          </li>
          <li className="lis_pur">
            <div className="lis_left"></div>
            <div className="lis_right">
              <p className="tit">
                <b>KK</b>
                <span>
                  80,000
                  <i>KK</i>
                </span>
              </p>
              <p className="txt">供应区块链资产交易平台</p>
              <div className="passage">
                <i></i>
              </div>
              <p className="time">
                <span>还剩18天16时18分</span>
                <span>剩余可抢89.76%</span>
              </p>
            </div>
          </li>
          <li className="lis_blue">
            <i className="hot"></i>
            <div className="lis_left"></div>
            <div className="lis_right">
              <p className="tit">
                <b>CT</b>
                <span>
                  800,000
                  <i>CT</i>
                </span>
              </p>
              <p className="txt">供应区块链资产交易平台</p>
              <div className="passage">
                <i></i>
              </div>
              <p className="time">
                <span>还剩18天18时49分</span>
                <span>剩余可抢17.31%</span>
              </p>
            </div>
          </li>
        </ul>
        <ul
          className={nav_active === 2 ? "nav_active list lis_b" : "list lis_b"}
        >
          <li className="lis_hot">
            <div className="lis_left"></div>
            <div className="lis_right">
              <p className="tit">
                <b>OEC</b>
                <span>
                  额度保密
                  <i>OEC</i>
                </span>
              </p>
              <p className="txt">
                OE是以区块链底层技术为架构，存储为底层，OEC则是以
              </p>
              <div className="passage">
                <i></i>
              </div>
              <p className="time">
                <span>即将开始</span>
                <span></span>
              </p>
            </div>
          </li>
          <li className="lis_pur">
            <div className="lis_left"></div>
            <div className="lis_right">
              <p className="tit">
                <b>KK</b>
                <span>
                  80,000
                  <i>KK</i>
                </span>
              </p>
              <p className="txt">供应区块链资产交易平台</p>
              <div className="passage">
                <i></i>
              </div>
              <p className="time">
                <span>即将开始</span>
                <span></span>
              </p>
            </div>
          </li>
          <li className="lis_blue">
            <i className="hot"></i>
            <div className="lis_left"></div>
            <div className="lis_right">
              <p className="tit">
                <b>CT</b>
                <span>
                  800,000
                  <i>CT</i>
                </span>
              </p>
              <p className="txt">供应区块链资产交易平台</p>
              <div className="passage">
                <i></i>
              </div>
              <p className="time">
                <span>即将开始</span>
                <span></span>
              </p>
            </div>
          </li>
        </ul>
        <ul
          className={nav_active === 3 ? "nav_active list lis_c" : "list lis_c"}
        >
          <li>
            <div className="lis_left"></div>
            <div className="lis_right">
              <p className="tit">
                <b>UPI</b>
                <span>
                  200,000
                  <i>UPI</i>
                </span>
              </p>
              <p className="txt">
                OE是以区块链底层技术为架构，存储为底层，OEC则是以
              </p>
              <div className="passage">
                <i></i>
              </div>
              <p className="time">
                <span>
                  <b>200000</b>
                  <i>UPI</i>
                </span>
                <span>200人已参与</span>
              </p>
            </div>
          </li>
          <li>
            <div className="lis_left"></div>
            <div className="lis_right">
              <p className="tit">
                <b>TGP</b>
                <span>
                  666
                  <i>TGP</i>
                </span>
              </p>
              <p className="txt">供应区块链资产交易平台</p>
              <div className="passage">
                <i></i>
              </div>
              <p className="time">
                <span>
                  <b>666</b>
                  <i>TGP</i>
                </span>
                <span>200人已参与</span>
              </p>
            </div>
          </li>
          <li>
            <i className="hot"></i>
            <div className="lis_left"></div>
            <div className="lis_right">
              <p className="tit">
                <b>YD</b>
                <span>
                  60,000
                  <i>YD</i>
                </span>
              </p>
              <p className="txt">供应区块链资产交易平台</p>
              <div className="passage">
                <i></i>
              </div>
              <p className="time">
                <span>
                  <b>200000</b>
                  <i>YD</i>
                </span>
                <span>200人已参与</span>
              </p>
            </div>
          </li>
        </ul>
        <Footer />
      </>
    );
  }
}

export default index;
